<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>工资详情</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <!--<link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">-->
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        [v-cloak] {
            display: none;
        }
        body{
            padding: 0;
            margin: 0;
        }
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .table-detail input[type=text] {
            padding-left: 0;
        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        select {
            color: rgb(42, 140, 236) !important;
            background: #fff;
        }

        .table-detail td {
            /*font-size: 16px;*/
            line-height: 29px;
            height: 29px;
            border-right: 1px solid #cbcbcb;
            border-bottom: 1px solid #cbcbcb;
        }

        .table-detail td.td-title {
            line-height: 1.5;
            background: #F5F5F5;
            width:23%;
        }

        .table-detail td.td-row3 {
            height: 70px;
            line-height: 20px;
            max-height: 70px;
            overflow: hidden;
            position: relative;
        }

        .wdqStyle td {
            color: #cbcbcb;
        }

        .yuying {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background: url("/dist/img/yuyin.png");
            background-size: cover;
            cursor: pointer;
        }

        input {
            text-align: left !important;
        }

        .table-detail td.td-value {
            width:27%;
            text-align: left !important;
            padding-left: 4px !important;
            /*font-size: 16px !important;*/
        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 5px;
            /*font-size: 16px;*/
            line-height: 1.5;
            border-radius: 3px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 6px;
        }

        .td-row3 span {
            max-height: 60px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            width: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
            word-wrap: break-word;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 25px;
            top: -12px;
        }

        .td-module td {
            background-color: #F8F8F8;
            color: #333333;
            font-weight: normal;
        }

        .table-detail {
            border: none;
            table-layout: fixed;
        }

        .table-detail .td-module td {
            background: #2a8cec;
            color: #fff;
            font-weight: normal;
        }

        span.lineOne {
            line-height: 20px;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .table-detail td.td-tanZongStyle-line {
            padding: 1px !important;
            text-align: left !important;
        }

        .td-tanZongStyle-line input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .td-tanZongStyle-line select {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }
        .lineOne {
            text-align: left;
        }

        .lineOne span, .lineSpan {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
            padding-right: 10px;
        }
        .change{
            color: red;
        }
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<div class="div-td-content-more"><i></i></div>
<section class="content" id="app" v-cloak style="padding:0px;">
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
    <!--<div class="center" style="overflow:auto;overflow-x:hidden;">-->
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">基本信息
                    <!--<input type="button"  v-model="month"-->
                           <!--@focus="showDatePicker($event)" style="position: absolute;right: 8px;top: 4px;text-align: center;">-->

                </td>
            </tr>
        </table>
    <template v-if="main.userName">
        <table class="table-detail">
            <tr>
                <td class="td-title">姓名</td>
                <td class="td-value">
                    <span class="lineOne"> {{main.userName}}</span>
                </td>
                <td class="td-title">公司</td>
                <td class="td-value">
                    <span class="lineOne">{{main.companyName}}</span>
                </td>

            </tr>
            <tr>
                <td class="td-title">部门</td>
                <td class="td-value">
                    <span class="lineOne">{{main.departName}}</span>
                </td>
                <td class="td-title">职位</td>
                <td class="td-value">
                    <span class="lineOne">{{main.roleName}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title">省份/市县</td>
                <td class="td-value">
                    <span class="lineOne">{{main.province}}/{{main.city}}</span>
                </td>

                <td class="td-title">入职时间</td>
                <td class="td-value">
                    <span class="lineOne">{{main.entryDate}}</span>
                </td>

            </tr>
            <tr>
                <td class="td-title">身份证号码</td>
                <td class="td-value" colspan="3">
                    <span class="lineOne">{{IdNumber(main.card)}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title">开户行</td>
                <td class="td-value" colspan="3">
                    <span class="lineOne">{{main.bank}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title">卡号</td>
                <td class="td-value" colspan="3">
                    <span class="lineOne">{{main.wegeCard}}</span>
                </td>
            </tr>
        </table>
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">考勤信息</td>
            </tr>
        </table>
        <table class="table-detail">
            <tr>
                <td class="td-title">上月工资标准</td>
                <td class="td-value">
                    <span class="lineOne"> {{fmoney(main.preSalaryStandard)}}</span>
                </td>
                <td class="td-title">本月工资标准</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.curSalaryStandard)}}</span>
                </td>

            </tr>
            <tr>
                <td class="td-title">应出勤</td>
                <td class="td-value">
                    <span class="lineOne">{{main.shouldSignIn}}</span>
                </td>

                <td class="td-title">实际出勤</td>
                <td class="td-value">
                    <span class="lineOne">{{main.realSignIn}}</span>
                </td>

            </tr>
            <tr>
                <td class="td-title">原出勤天数</td>
                <td class="td-value">
                    <span class="lineOne">{{main.signInFormer}}</span>
                </td>

                <td class="td-title">本月出勤天数</td>
                <td class="td-value">
                    <span class="lineOne">{{main.signInStandard}}</span>
                </td>

            </tr>
            <tr>
                <td class="td-title">请假天数</td>
                <td class="td-value">
                    <span class="lineOne">{{main.leaveDays}}</span>
                </td>

                <td class="td-title">出勤工资</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.wages)}}</span>
                </td>

            </tr>
            <tr>
                <td class="td-title">餐补</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.foodAllowance)}}</span>
                </td>

                <td class="td-title">车补</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.carSupplement)}}</span>
                </td>


            </tr>
            <tr>
                <td class="td-title">话费补助</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.callSupplement)}}</span>
                </td>
                <td class="td-title" id="zfbz">住房补助</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.houseSupplement)}}</span>
                </td>



            </tr>
            <tr>
                <td class="td-title">其他补助</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.otherSupplement)}}</span>
                </td>
                <td class="td-title">奖金</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.bouns)}}</span>
                </td>



            </tr>
            <tr>
                <td class="td-title">绩效奖励</td>
                <td class="td-value">
                    <span class="lineOne">{{fmoney(main.salesAward)}}</span>
                </td>
                <td class="td-title">团队组建扣款</td>
                <td class="td-value">
                    <span class="lineOne" style="color:red;">{{fmoney(main.personnelDeduction)}}</span>
                </td>




            </tr>
            <tr>
                <td class="td-title">考核罚款</td>
                <td class="td-value">
                    <span class="lineOne" style="color:red;">{{fmoney(main.salesPunishment)}}</span>
                </td>
                <td class="td-title">其他扣款</td>
                <td class="td-value" >
                    <span class="lineOne" style="color:red;">{{fmoney(main.otherDetuction)}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title">其他扣款描述</td>
                <td class="td-value" colspan="3">
                    <span class="lineOne"></span>
                </td>
            </tr>
            <tr>
                <td class="td-title">备 注</td>
                <td class="td-value" colspan="3">
                    <span class="lineOne">{{main.remark}}</span>
                </td>
            </tr>
        </table>
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">工资信息</td>
            </tr>
        </table>
        <table class="table-detail">
            <tr>
                <td class="td-title">应发工资</td>
                <td class="td-value" style="border-right: none;">
                    <span class="lineOne">{{fmoney(main.payable)}}</span>
                </td>
                <td class="td-title" style="width: 23%;background: #fff;border-left: none;border-right: none;"></td>
                <td class="td-value"></td>
            </tr>
            <tr>
                <td class="td-title">五险一金</td>
                <td class="td-value" style="border-right: none;">
                    <span class="lineOne" style="color:red;">{{fmoney(main.insuranceGold)}}</span>
                </td>
                <td class="td-title" style="width: 23%;background: #fff;border-left: none;border-right: none;"></td>
                <td class="td-value"></td>
            </tr>

            <tr>
                <td class="td-title">应扣个税</td>
                <td class="td-value" style="border-right: none;" colspan="2">
                    <span class=""style="color:red;">{{main.shouldTax}}</span>
                    <span v-if="main.taxAmount>0">（计税金额：{{fmoney(main.taxAmount)}})</span>
                    <span v-else>(计税金额：0.00)</span>
                </td>
                <td class="td-title" style="width: 23%;background: #fff;border-left: none;border-right: none;"></td>
                <td class="td-value"></td>
            </tr>
            <tr>
                <td class="td-title">还个人借款</td>
                <td class="td-value" style="border-right: none;" v-if="main.repayment!=''">
                    <span class="lineOne" style="color:red;">{{fmoney(main.repayment)}}</span>
                </td>
                <td v-else class="td-value" style="border-right: none;color:red !important">0.00</td>
                <td class="td-title" style="width: 23%;background: #fff;border-left: none;border-right: none;"></td>
                <td class="td-value"></td>
            </tr>
            <tr>
                <td class="td-title">实发金额</td>
                <td class="td-value" style="border-right: none;">
                    <span class="lineOne">{{fmoney(main.realPay)}}</span>
                </td>
                <td class="td-title" style="width: 23%;background: #fff;border-left: none;border-right: none;"></td>
                <td class="td-value"></td>
            </tr>
        </table>
    </template>
    <template v-else>
        <div style="margin: 0 auto;color: #999999;text-align: center;margin-top: 100px;font-size: 22px;">
            本月暂无工资信息
        </div>

    </template>
    <!--</div>-->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="/dist/plugins/scroll/myScroll.js"></script>
<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/calendar/calendar-pro.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                    }
                },
                error: function (e) {
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script>

</script>
<script type="text/javascript">
    //api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            month: getUrlParamObj().month,
            main:{}
        },
        methods: {
            //初始化时间控件
            showDatePicker: function (e, type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.month = dp.cal.getNewDateStr();
                        that.get_salary();
                        return true;
                    },
                    maxDate: new Date().Format("yyyy-MM"),//本月
                    dateFmt:'yyyy-MM',
                    isShowClear:false,
                    isShowToday: false
                });
                $(e.target).blur();
            },
            //合并单元格
            tablesMergeCell: function (list) {
                if (list != undefined && list && list.length > 0) {
                    for (field in list[0]) {
                        var k = 0;
                        while (k < list.length) {
                            list[k][field + 'span'] = 1;
                            list[k][field + 'dis'] = false;
                            for (var i = k + 1; i <= list.length - 1; i++) {
                                if (list[k][field] == list[i][field] && list[k][field] != '') {
                                    list[k][field + 'span']++;
                                    list[k][field + 'dis'] = false;
                                    list[i][field + 'span'] = 1;
                                    list[i][field + 'dis'] = true;
                                } else {
                                    break;
                                }
                            }
                            k = i;
                        }
                    }
                }
                return list;
            },
            get_date: function (list) {
                var data;
                var current = [];
                var last = [];
                var next = [];
                var benNian = new Date().Format("yyyy");
                var benYue = new Date().Format("M");
                var lastTime = '';
                var currentTime = new Date().Format("yyyy-MM");
                var today = new Date().Format("yyyy-MM-dd");
                var nextTime = '';
                if (Number(benYue) + 1 > 12) {
                    nextTime = Number(benNian) + 1 + "-01"
                } else if (Number(benYue) + 1 < 10) {
                    nextTime = Number(benNian) + "-0" + (Number(benYue) + 1)
                } else {
                    nextTime = Number(benNian) + "-" + (Number(benYue) + 1)
                }
                if (Number(benYue) - 1 < 1) {
                    lastTime = Number(benNian) - 1 + "-12"
                } else if (Number(benYue) - 1 < 10) {
                    lastTime = Number(benNian) + "-0" + (Number(benYue) - 1)
                } else {
                    lastTime = Number(benNian) + "-" + (Number(benYue) - 1)
                }
                for(var i=0;i<list.length;i++){
                    if (lastTime == list[i].leaveDate.substring(0, 7)) {
                        last.push({date: list[i].leaveDate, data: '假',yy:list[i].remark})
                    }
                    if (currentTime == list[i].leaveDate.substring(0, 7)) {
                        if(today == list[i].leaveDate){
                            current.push({date:list[i].leaveDate, data: '假',today:true,yy:list[i].remark})
                        }else{
                            current.push({date:list[i].leaveDate, data: '假',yy:list[i].remark})
                        }
                    }
                    if (nextTime == list[i].leaveDate.substring(0, 7)) {
                        next.push({date: list[i].leaveDate, data: '假',yy:list[i].remark})
                    }
                }
                data = {
                    last: last,
                    current: current,
                    next: next
                }
                console.log(data)
                return data

            },
            get_salary: function () {
                var that = this;
                if(that.isWeiXin()){

                }else {
                    var dialog = {
                        dialog: 'show'
                    }
                    prompt(JSON.stringify(dialog))
                }
                $.wyui.postMethod("/salaryDetails/getSalaryByUserIdAndMonth.json", {
                    "userId": that.userId,
                    "month": that.month,
                }, function (data) {
                    that.main=data;
                    if(that.isWeiXin()){

                    }else{
                        var dialog = {
                            dialog: 'hidden'
                        }
                        prompt(JSON.stringify(dialog))
                    }
                });
            },
            //处理计税金额
            isJiShui:function (item) {
                if(item<0){
                    return 'lineOne'+' change';
                }else{
                    return 'lineOne';
                }
            },
            //处理身份证号
            IdNumber: function (idNum) {
                if (idNum) {
                    var firstIdNum = idNum.substring(0, 10);
                    var lastIdNum = idNum.substring(idNum.length - 4, idNum.length);
                    return firstIdNum + "****" + lastIdNum;
                }
            },
            //处理金额  以逗号隔开
            fmoney: function (s, n) {
                if(s){
                    s=(s+"").replace("-","");
                    n = n > 0 && n <= 20 ? n : 2;
                    s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                    var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                        t = "";
                    for (i = 0; i < l.length; i++) {
                        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                    }
                    return t.split("").reverse().join("") + "." + r;
                }else{
                    return ""
                }
            },
            isWeiXin:function () {
                var ua = window.navigator.userAgent.toLowerCase();
                console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
                console.log(ua.indexOf("chrome") != -1)
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    return true;
                } else {
                    return false;
                }
            },

        },
        mounted: function () {
            var that = this;

            that.get_salary();
            setTimeout(function () {
                if(server.fwq){
                    if(server.fwq=="wyp"){
                        console.warn("当前登录的是沃源辽鞍系统")
                        $("#zfbz").html("工时费");
                    }
                }
            },1000)
        }

    });
</script>
</body>
</html>